<template>
	<view class="box" hover-class="boxHover" hover-stay-time=0>
		<view class="inner" hover-class="innerHover" hover-stop-propagation>内部元素</view>
	</view>
	
	<view>----------</view>
	<text selectable=true space="emsp">文本  标签</text>
	<navigator url="/pages/demo2/demo2"><image src="/static/pic4.jpg"></image></navigator>
	<view>----------</view>
	<view><navigator url="/pages/demo1/demo1" open-type="reLaunch">跳转到demo1</navigator></view>
	<scroll-view class="scrollView" scroll-x=true>
		<view class="scrollItem">scroll的子元素</view>
		<view class="scrollItem">scroll的子元素</view>
		<view class="scrollItem">scroll的子元素</view>
		<view class="scrollItem">scroll的子元素</view>
		<view class="scrollItem">scroll的子元素</view>
	</scroll-view>
</template>

<script setup>
</script>

<style lang="scss">
	.box {
		width: 200px;
		height: 200px;
		background: #ccc;
		.inner{
			width: 150px;
			height: 150px;
			background: green;
		}
		.innerHover{
			background: greenyellow
		}
	}
	.boxHover{
		background: orange;
		width: 300px;
		height: 300px;
	}
	
	.scrollView{
		width: 80%;
		height: 220px;
		border: 1px solid red;
		//不换行
		white-space: nowrap;
		.scrollItem{
			width: 100px;
			height: 100px;
			background: goldenrod;
			display: inline-block;
			margin: 5px;
		}
	}
</style>
